<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        width: 1200px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background: #000000;
        padding: 20px 10px;
    }

    .container {
        background: #1a1a1a;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        max-width: 1200px;
        margin: 0 auto;
    }

    .header {
        text-align: center;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #383838;
    }

    .header h1 {
        font-size: 2rem;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 16px;
        letter-spacing: -0.5px;
    }

    .header-info {
        display: flex;
        justify-content: center;
        gap: 32px;
        margin-top: 16px;
        flex-wrap: wrap;
    }

    .header-info-item {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #a8a8a8;
        font-size: 0.875rem;
    }

    .header-info-item strong {
        color: #ffffff;
        font-weight: 600;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
        margin-bottom: 20px;
    }

    .stat-card {
        background: #262626;
        border-radius: 8px;
        padding: 16px;
        text-align: center;
        border: 1px solid #383838;
        transition: all 0.2s ease;
    }

    .stat-card:hover {
        border-color: #4a4a4a;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
        background: #2a2a2a;
    }

    .stat-card .label {
        font-size: 0.875rem;
        color: #a8a8a8;
        margin-bottom: 12px;
        font-weight: 400;
    }

    .stat-card .value {
        font-size: 1.75rem;
        font-weight: 600;
        color: #ffffff;
        letter-spacing: -0.5px;
    }

    .section {
        margin-bottom: 20px;
    }

    .section-title {
        font-size: 1.125rem;
        color: #ffffff;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #383838;
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        letter-spacing: -0.3px;
    }

    .section-title::before {
        content: '';
        width: 3px;
        height: 16px;
        background: #0095f6;
        border-radius: 2px;
    }

    .map-section {
        background: #262626;
        border-radius: 8px;
        padding: 12px;
        border: 1px solid #383838;
        margin-bottom: 12px;
    }

    .map-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        padding-bottom: 6px;
        border-bottom: 1px solid #383838;
    }

    .map-name {
        font-size: 1.125rem;
        font-weight: 600;
        color: #ffffff;
    }

    .map-stats {
        display: flex;
        gap: 16px;
        font-size: 0.875rem;
        color: #a8a8a8;
    }

    .map-stats span {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .map-stats .collected {
        color: #0095f6;
        font-weight: 500;
    }

    .map-stats .uncollected {
        color: #ed4956;
        font-weight: 500;
    }

    .wing-list-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .wing-list-column {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .wing-list-column-title {
        font-size: 0.8125rem;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 4px;
        padding: 4px 8px;
        background: #1f1f1f;
        border-radius: 4px;
        border-left: 3px solid;
    }

    .wing-list-column-title.uncollected-title {
        border-left-color: #ed4956;
        color: #ed4956;
    }

    .wing-list-column-title.collected-title {
        border-left-color: #0095f6;
        color: #0095f6;
    }

    .wing-list {
        /* Masonry layout to reduce whitespace */
        column-width: 150px;
        column-gap: 8px;
    }

    .wing-item {
        background: #1f1f1f;
        border-radius: 6px;
        padding: 8px;
        border: 1px solid #383838;
        transition: all 0.2s ease;
        /* Masonry item rules */
        display: inline-block;
        width: 100%;
        margin: 0 0 8px;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
    }

    .wing-item.collected {
        border-left: 3px solid #0095f6;
    }

    .wing-item.uncollected {
        border-left: 3px solid #ed4956;
    }

    .wing-item .wing-name + div {
        font-size: 0.6875rem !important;
    }

    .wing-item:hover {
        border-color: #4a4a4a;
        background: #262626;
    }

    .wing-name {
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 6px;
        font-size: 0.8125rem;
        word-break: break-all;
        line-height: 1.3;
    }

    .wing-info {
        font-size: 0.75rem;
        color: #a8a8a8;
        line-height: 1.4;
    }

    .wing-info .status {
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px solid #383838;
    }

    .wing-info .collected-time {
        color: #0095f6;
    }

    .wing-info .uncollected {
        color: #ed4956;
    }

    .empty-map {
        text-align: center;
        color: #a8a8a8;
        padding: 40px;
        font-size: 0.875rem;
    }

    @media (max-width: 768px) {
        body {
            width: 100%;
            padding: 16px;
        }

        .container {
            padding: 20px;
            border-radius: 0;
        }

        .header h1 {
            font-size: 1.5rem;
        }

        .stats-grid {
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .wing-list-container {
            grid-template-columns: 1fr;
        }

        .wing-list {
            column-width: auto;
            column-count: 1;
        }
    }
</style>

<div class="container">
    <div class="header">
        <h1>光翼详细信息</h1>
        <div class="header-info">
            <div class="header-info-item">
                <strong>角色ID:</strong> <span id="roleId">{{roleId}}</span>
            </div>
            <div class="header-info-item">
                <strong>更新时间:</strong> <span id="timestamp">{{timestamp}}</span>
            </div>
        </div>
    </div>

    <div class="stats-grid" id="statsGrid">
        <div class="stat-card">
            <div class="label">总光翼数</div>
            <div class="value">{{totalWings}}</div>
        </div>
        <div class="stat-card">
            <div class="label">已收集</div>
            <div class="value" style="color: #0095f6;">{{collectedWings}}</div>
        </div>
        <div class="stat-card">
            <div class="label">未收集</div>
            <div class="value" style="color: #ed4956;">{{uncollectedWings}}</div>
        </div>
        <div class="stat-card">
            <div class="label">已献祭</div>
            <div class="value">{{depositedWings}}</div>
        </div>
    </div>

    <div class="section" id="wingsSection">
        <div class="section-title">按地图分类</div>
        <div id="wingsByMap"></div>
    </div>
</div>

<script>
    const wingsByMap = JSON.parse('{{@wingsByMapJson}}');
    const uncollectedByMap = JSON.parse('{{@uncollectedByMapJson}}');

    const mapOrder = ['晨岛', '云野', '雨林', '霞谷', '暮土', '禁阁', '伊甸', '小黑屋', '先祖永久翼', '未知'];

    function formatTimestamp(timestamp) {
        if (!timestamp || timestamp === 0) {
            return '从未收集';
        }
        const date = new Date(timestamp * 1000);
        return date.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        });
    }

    function renderWingsByMap() {
        const container = document.getElementById('wingsByMap');
        if (!wingsByMap || Object.keys(wingsByMap).length === 0) {
            container.innerHTML = '<div class="empty-map">暂无数据</div>';
            return;
        }

        const sortedMaps = mapOrder.filter(map => wingsByMap[map] && wingsByMap[map].length > 0);

        Object.keys(wingsByMap).forEach(map => {
            if (!mapOrder.includes(map) && wingsByMap[map] && wingsByMap[map].length > 0) {
                sortedMaps.push(map);
            }
        });

        sortedMaps.forEach(map => {
            const wings = wingsByMap[map];
            const uncollected = uncollectedByMap[map] || [];
            const collected = wings.filter(w => w.collected);

            const mapSection = document.createElement('div');
            mapSection.className = 'map-section';

            mapSection.innerHTML = `
                <div class="map-header">
                    <div class="map-name">${map}</div>
                    <div class="map-stats">
                        <span>总计: ${wings.length}</span>
                        <span class="collected">已收集: ${collected.length}</span>
                        <span class="uncollected">未收集: ${uncollected.length}</span>
                    </div>
                </div>
                <div class="wing-list-container">
                    <div class="wing-list-column">
                        <div class="wing-list-column-title uncollected-title">未收集 (${uncollected.length})</div>
                        <div class="wing-list uncollected-list"></div>
                    </div>
                    <div class="wing-list-column">
                        <div class="wing-list-column-title collected-title">已收集 (${collected.length})</div>
                        <div class="wing-list collected-list"></div>
                    </div>
                </div>
            `;

            const wingListContainer = mapSection.querySelector('.wing-list-container');
            const uncollectedColumn = mapSection.querySelector('.wing-list-column:first-child');
            const collectedColumn = mapSection.querySelector('.wing-list-column:last-child');
            const uncollectedList = mapSection.querySelector('.uncollected-list');
            const collectedList = mapSection.querySelector('.collected-list');

            // 分离已收集和未收集的光翼
            const uncollectedWings = uncollected.slice();
            const collectedWings = collected.slice();

            // 按中文名称排序，相同名称的放在一起
            const sortWings = (wings) => {
                return wings.sort((a, b) => {
                    const nameA = (a.chineseName || a.name).toLowerCase();
                    const nameB = (b.chineseName || b.name).toLowerCase();
                    if (nameA !== nameB) {
                        return nameA.localeCompare(nameB, 'zh-CN');
                    }
                    return (a.name || '').localeCompare(b.name || '', 'zh-CN');
                });
            };

            const sortedUncollected = sortWings(uncollectedWings);
            const sortedCollected = sortWings(collectedWings);

            // 如果一列为空，隐藏该列，让另一列占据全宽
            if (sortedUncollected.length === 0 && sortedCollected.length > 0) {
                uncollectedColumn.style.display = 'none';
                wingListContainer.style.gridTemplateColumns = '1fr';
            } else if (sortedCollected.length === 0 && sortedUncollected.length > 0) {
                collectedColumn.style.display = 'none';
                wingListContainer.style.gridTemplateColumns = '1fr';
            } else if (sortedUncollected.length === 0 && sortedCollected.length === 0) {
                // 都没有，隐藏整个容器
                wingListContainer.style.display = 'none';
            } else {
                // 两列都有数据，根据数量动态调整列宽，减少空白
                const left = sortedUncollected.length;
                const right = sortedCollected.length;
                const total = left + right;

                // 计算比例并分配列宽（限制在 0.7fr~2.3fr 之间）
                let leftFr = 1;
                let rightFr = 1;
                if (total > 0) {
                    const leftRatio = left / total;
                    // 将 0.15~0.85 的占比映射到 0.7~2.3 的 fr
                    const mapToFr = (ratio) => {
                        const minFr = 0.7;
                        const maxFr = 2.3;
                        const clamped = Math.max(0.15, Math.min(0.85, ratio));
                        return (minFr + (maxFr - minFr) * ((clamped - 0.15) / (0.70)));
                    };
                    leftFr = mapToFr(leftRatio);
                    rightFr = mapToFr(1 - leftRatio);
                }
                wingListContainer.style.gridTemplateColumns = `${leftFr.toFixed(2)}fr ${rightFr.toFixed(2)}fr`;
            }

            // 渲染未收集的光翼
            sortedUncollected.forEach(wing => {
                const wingItem = document.createElement('div');
                wingItem.className = 'wing-item uncollected';

                const displayName = wing.chineseName || wing.name;
                let infoHtml = `<div class="wing-name">${displayName}</div>`;

                if (wing.chineseName && wing.chineseName !== wing.name) {
                    infoHtml += `<div style="font-size: 0.6875rem; color: #666; margin-top: 2px;">${wing.name}</div>`;
                }

                infoHtml += '<div class="wing-info">';
                infoHtml += `<div class="status">
                    <span class="uncollected">未收集</span>
                </div>`;
                infoHtml += '</div>';

                wingItem.innerHTML = infoHtml;
                uncollectedList.appendChild(wingItem);
            });

            // 渲染已收集的光翼
            sortedCollected.forEach(wing => {
                const wingItem = document.createElement('div');
                wingItem.className = 'wing-item collected';

                const displayName = wing.chineseName || wing.name;
                let infoHtml = `<div class="wing-name">${displayName}</div>`;

                if (wing.chineseName && wing.chineseName !== wing.name) {
                    infoHtml += `<div style="font-size: 0.6875rem; color: #666; margin-top: 2px;">${wing.name}</div>`;
                }

                infoHtml += '<div class="wing-info">';
                infoHtml += `<div class="status">
                    <span class="collected-time">已收集</span></div>`;
                    if (wing.deposited) {
                        infoHtml += '<div style="margin-top: 3px; color: #f39c12; font-size: 0.6875rem;">已献祭</div>';
                    }
                infoHtml += '</div>';

                wingItem.innerHTML = infoHtml;
                collectedList.appendChild(wingItem);
            });

            container.appendChild(mapSection);
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        renderWingsByMap();
    });
</script>